<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">



        function add() {
            var content = document.getElementById("put");
            var contents=content.value;

            var tr = document.createElement("tr"),
                td1 = document.createElement("td"),
                td2 = document.createElement("td"),
                thetable = document.getElementById("table");


            td1.innerHTML = contents;
            td2.innerHTML = "<a href=javascript:delete(); onclick=up(this)>上移</a>,<a href=javascript:delete(); onclick=down(this)>下移</a>,<a href=javascript:delete(); onclick=del(this)>删除</a>";


            tr.appendChild(td1);
            tr.appendChild(td2);


            thetable.appendChild(tr);

            content.value="";


        }



        function del(x) {
            var tr = x.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }

        function up(obj) {


            var tr = obj.parentNode.parentNode;

            var tbody = tr.parentNode;

            var rowIdx = 0;

            for (var i = 0; i < tbody.rows.length; i++) {
                if (tbody.rows[i] == tr) {
                    rowIdx = i;
                    break;
                }
            }

            if (rowIdx == 0) return alert('已经是最上一行了');

            var preTr = tbody.rows[rowIdx - 1];

            var nextTr = tr.nextSibling;

            tbody.removeChild(preTr);

            if (nextTr) tbody.insertBefore(preTr, nextTr);
            else tbody.appendChild(preTr);

        }

        function down(obj) {

            var tr = obj.parentNode.parentNode;

            var tbody = tr.parentNode;

            var rowIdx = 0;
            for (var i = 0; i < tbody.rows.length; i++) {
                if (tbody.rows[i] == tr) {
                    rowIdx = i;
                    break;
                }
            }

            if (rowIdx == tbody.rows.length - 1) return alert('已经是最后一行了');

            var nextTr = tbody.rows[rowIdx + 1];

            var nextTrSibling = nextTr.nextSibling;

            tbody.removeChild(tr);

            if (nextTrSibling) tbody.insertBefore(tr, nextTrSibling);
            else tbody.appendChild(tr);

        }

        function cancel() {
            var content = document.getElementById("put");
            content.value="";
        }

    </script>
</head>
<body>
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>操作</th>
    </tr>
</table>
<input type="text" id="put">
<input type="button" value="添加" onclick="add()"/>
<input type="button" value="取消" onclick="cancel()"/>

</body>
</html>